﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:NYTimes="clr-namespace:NYTimes;assembly=NYTimesSilverlightKit" 
    xmlns:local="clr-namespace:MostPopular"
    x:Class="MostPopular.MainPage" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
    SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
	d:DataContext="{d:DesignInstance NYTimes:MovieReviewsByKeyword, IsDesignTimeCreatable=True}"
	>

	<phone:PhoneApplicationPage.Resources>
		<DataTemplate x:Key="MostPopularItemTemplate">
			<Grid Margin="0,0,0,4">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition/>
				</Grid.ColumnDefinitions>
				<Image HorizontalAlignment="Left" Width="75" Height="75" Source="{Binding Thumbnail}"/>
				<StackPanel d:LayoutOverrides="Width, Height" Grid.Column="1">
					<TextBlock Text="{Binding Title}"  Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" />
					<TextBlock Text="{Binding Byline}" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
				</StackPanel>
				<Border x:Name="DetailButton" BorderBrush="White" BorderThickness="3" CornerRadius="15" HorizontalAlignment="Right" VerticalAlignment="Top" Background="#3E000000" Margin="0,4,4,0" MouseLeftButtonDown="DetailButton_MouseLeftButtonDown">
					<TextBlock TextWrapping="Wrap" Text="4" FontFamily="Webdings"/>
				</Border>
			</Grid>
		</DataTemplate>
	</phone:PhoneApplicationPage.Resources>
 
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="AppBar" IsVisible="True" Opacity="0.95">
            <shell:ApplicationBarIconButton x:Name="SettingsButton" IconUri="/Images/appbar.feature.settings.rest.png" Text="settings" Click="ShowOptions"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="OneDay" Text="1 Day" Click="OneDay_Click"/>
                <shell:ApplicationBarMenuItem x:Name="SevenDays" Text="7 Days" Click="SevenDays_Click"/>
				<shell:ApplicationBarMenuItem x:Name="ThirtyDays" Text="30 Days" Click="ThirtyDays_Click"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <controls:Pivot Title="New York Times Most Popular">
            <controls:PivotItem x:Name="MostEmailed" Header="most emailed">
                <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding MostEmailed.Results}" ItemTemplate="{StaticResource MostPopularItemTemplate}"
                         SelectedItem="{Binding SelectedItem, Mode=TwoWay}"/>
            </controls:PivotItem>
 
            <controls:PivotItem x:Name="MostShared" Header="most shared"> 
                <ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding MostShared.Results}" ItemTemplate="{StaticResource MostPopularItemTemplate}"
                            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"/>
            </controls:PivotItem>

            <controls:PivotItem x:Name="MostViewed" Header="most viewed">
            	<ListBox x:Name="ThirdListBox" Margin="0,0,-12,0" ItemsSource="{Binding MostViewed.Results}" ItemTemplate="{StaticResource MostPopularItemTemplate}"
                         SelectedItem="{Binding SelectedItem, Mode=TwoWay}"/>
            </controls:PivotItem>

        </controls:Pivot>
    </Grid>

</phone:PhoneApplicationPage>